<template>
  <div id="emp">
    <el-card class="box-card" shadow="always">
      <!-- card的头部 -->
      <template #header>
        <div class="card-header">
          <span class="title">挂号服务界面</span>
          <div class="input_search">
            <el-input v-model="search" @input="search_change" placeholder="姓名查询" />
          </div>
          <el-button class="button_edit" type="primary" :icon="Plus" @click="debug=!debug">调试</el-button>
        </div>
      </template>
      <!-- 以下是card的body区域，直接使用标签即可，不需要使用插槽 -->
      <el-table :data="tableData" style="width: 100%">
        <!-- 使用扩展行显示行记录详情
        一般情况下，扩展行在最左侧 -->
        <!-- el-descriptions 展示行信息 -->
        <el-table-column type="expand">
                    <template #default="scope">
                        <div style="padding: 20px">

                            <el-descriptions class="margin-top" :title="'患者 ' + scope.row.name + ' 的详情'" :column="3" border>
                                <!-- <template #extra>
                                    <el-button type="primary">Operation</el-button>
                                </template> -->

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            病历号
                                        </div>
                                    </template>
                                    {{ scope.row.caseNum }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            员工姓名
                                        </div>
                                    </template>
                                    {{ scope.row.name }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            性别
                                        </div>
                                    </template>
                                    {{ scope.row.sex }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            年龄
                                        </div>
                                    </template>
                                    {{ scope.row.age }}
                                </el-descriptions-item>
                                  <el-descriptions-item>
                                      <template #label>
                                          <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                  <user />
                                              </el-icon>
                                              医生姓名
                                          </div>
                                      </template>
                                      {{ scope.row.docname }}
                                  </el-descriptions-item>
                                  
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <HomeFilled />
                                            </el-icon>
                                            家庭地址
                                        </div>
                                    </template>
                                   {{ scope.row.address }}
                                </el-descriptions-item>

                            </el-descriptions>
                        </div>
                    </template>
                </el-table-column>

        <el-table-column prop="caseNum" label="病历号" sortable />

        <el-table-column prop="name" label="姓名" sortable />
        <el-table-column prop="visitDate" label="到访日期"  />
        <el-table-column prop="noon" label="午别"  />
        <el-table-column prop="idnum" label="身份证号" />
        <el-table-column prop="state_show" label="看诊状态"  >
          <template #default="scope">
            <el-tag
              :type="get_state_style(scope.row)"
              disable-transitions
              >{{ scope.row.state_show }}</el-tag
            >
        </template>
        </el-table-column>

        <el-table-column label="Operations">

          <template #default="scope">
            <el-button class="button_edit" v-if="debug"  @click="unEdit(scope.$index, scope.row)" >-</el-button>
            <el-button class="button_edit" v-if="debug"  @click="handleEdit(scope.$index, scope.row)" >+</el-button>
            <el-button class="button_edit"  @click="handleEdit(scope.$index, scope.row)" :disabled="scope.row.delmark == 0|| scope.row.delmark == 3 || scope.row.delmark == 4 || scope.row.delmark == 5">
                <i class="fa fa-play-circle-o fa-1x" aria-hidden="false"></i>
                <span v-if="scope.row.delmark == 0 ">完成 </span>
                <span v-if="scope.row.delmark == 1 ">接诊</span>
                <span v-if="scope.row.delmark == 2 ">缴费</span>
                <span v-if="scope.row.delmark == 3 ">退费</span>
                <span v-if="scope.row.delmark == 4 ">完成</span>
            </el-button>
              
            <el-button class="button_drop" :disabled="scope.row.delmark>1|| scope.row.delmark ==0" @click="withdrawal(scope.$index, scope.row)">退号</el-button>
            <!-- <el-button size="small" type="danger">Delete</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加增加和修改对话框即可  -->
  </div>

</template>

<script setup>
const debug=ref(false);
import { ref, computed } from 'vue'
import $axios from '../../utils/axios'
import { ElMessage, ElMessageBox } from 'element-plus'

const psw_same = ref(false)

const formLabelWidth = '140px'
import {
  Plus,
  User,
  HomeFilled,

} from '@element-plus/icons-vue'
const FilterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !show_del.value ||
      data.name.toLowerCase().includes(show_del.value.toLowerCase())
  )
)
const tableData = ref([
  {
    id: 1,
    caseNum: "233",
    name: "赵子鉴",
    sex: "男",
    idnum: "130604200212160916",
    birthday: new Date(2002, 11, 16),
    age: 21,
    address: "河北省保定市莲池区迎宾小区22号楼2单元301",
    medicalhistory: "无",

    visitDate: new Date(2002, 11, 16),
    weekday: "1",
    noon: "上午",

    deptId: 2,
    leve_id: 2,
    docId: -1,
    docname: '',

    isBook: 1,//默认选择病历本
    money: 1,

    medicalcard: "10010",
    medicalmoney: "1",
    delmark:'',
    state_show:"",
    button_show:"诊治",
  }
])

const show_del = ref(0)

// const test=(row) => {
//     console.log(row);
//     row.delmark=row.delmark==1?0:1;
// }

const modDelmark=(index,row) => {
  console.log("row: " + row.delmark);
  if(row.delmark==1)
  {
    
  }
}


let curentindex = -1

const switch_change = (value) => {
  console.log(value)
  const path = "/register/delet"
  $axios.post(path, value, {

    headers: {
      'Content-Type': 'application/json;utf-8'
    }

  }).then((res) => {
    if (res.data.code === 200) {
      console.log(res.result);
    }
  })
}
const switch_del = async () => {
  console.log(show_del.value);
  search.value = ''
  //1是仅显示生效，0为全部显示
  if (show_del.value === 0) {
    console.log("search", search.value);

    loaddata()
  }
  else if (show_del.value === 1) {
    const path = '/register/q/all'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    console.log("加载生效数据");
    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
      tableData.value = res.result
      console.log("加载数据成功：");
      console.log("res_del:", res.result);

    }
    tableData.value = tableData.value.filter(checkItem)
    console.log("filter_del", tableData.value);
  }

}
const get_state_style=(row) =>{
  let s=""
  switch(row.delmark){
    case 0:
      s = 'info'  //"退号";
      break;

    case 1:
       s = '' // "已挂号";
      break;

    case 2:
      s = 'success' //"已接诊";
      break;

    case 3:
       s = 'info'// "已缴费";
      break;
    case 4:
      s = 'info'// "已缴费";
      break;
    default:
      s = 'danger'  //"未知";
      break;
  }
  return s;
}


function checkItem(num) { return num.delmark === 0; }
function searchItem(num) { console.log("test:\n" + num.name + " " + num.name.indexOf(search.value)); return !(num.name.indexOf(search.value) === -1); }
const search = ref()
const search_change = async () => {
  const path = '/patient/q/all'
  // 发同步请求
  // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
  // 并且返回服务器做出响应
  console.log("为表格自动加载数据");
  const { data: res } = await $axios.get(path)
  // 应用结果
  if (res.code === 200) {
    tableData.value = res.result
    console.log("加载数据成功：");
    console.log("res_search:", res.result);

  }
  var s = tableData.value.filter(searchItem);
  tableData.value = s
  console.log("filter_search:", tableData.value.filter(searchItem));
  test_state()
}
const autoSet = () => {

}
autoSet()
// 为表格加载数据

const loaddata = async () => {
  // 定义请求路径

  const path = '/patient/q/all'
  // 发同步请求
  // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
  // 并且返回服务器做出响应
  console.log("为表格自动加载数据");
  const { data: res } = await $axios.get(path)
  // 应用结果
  if (res.code === 200) {
    tableData.value = res.result
    console.log("加载数据成功：");
    console.log(res.result);
    test_state()
  }
  for(let i = 0; i < tableData.value.length; i++) {
    const path2 = '/doc/q/byid/' + res.result[i].docId;
    const { data: res2 } = await $axios.get(path2)
    console.log(res2);
    tableData.value[i].docname=res2.result.name;
  }
  

}
// 调用
loaddata()
const test_state=()=>{
  for (let i = 0; i < tableData.value.length; i++) {
    console.log("i: " + i);
    switch (tableData.value[i].delmark) {

      case 0:
        tableData.value[i].state_show = "已退号";
        break;

      case 1:
        tableData.value[i].state_show = "已挂号";
        break;

      case 2:
        tableData.value[i].state_show = "已接诊";
        break;

      case 3:
        tableData.value[i].state_show = "已缴费";
        break;
      case 4:
        tableData.value[i].state_show = "已退费";
        break;

      default:
        tableData.value[i].state_show = "未知";
        break;
    }
  }
}
const unEdit = (index, row) => {
  row.delmark = row.delmark - 1;
  test_state()
  console.log("id=" + row.id);
  const path = "/patient/updatedelmarkbyid/" + row.id + "/" + row.delmark;
  // weekString2Num4Mod();

  $axios.post(path, {

    headers: {
      'Content-Type': 'application/json;utf-8'
    }

  })
}
const handleEdit=(index,row)=>{

  row.delmark=row.delmark+1;
  test_state()
  console.log("id="+row.id);
  const path = "/patient/updatedelmarkbyid/"+row.id+"/"+row.delmark;
  // weekString2Num4Mod();
  
  $axios.post(path, {
    headers: {
      'Content-Type': 'application/json;utf-8'
    }
  })

}
const withdrawal = (index, row) => {
  ElMessageBox.confirm(
    '是否要退号',
    'Warning',
    {
      confirmButtonText: '确认退号',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      row.delmark = 0;
      test_state()
      console.log("id=" + row.id);
      const path = "/patient/updatedelmarkbyid/" + row.id + "/" + row.delmark;
      // weekString2Num4Mod();

      $axios.post(path, {

        headers: {
          'Content-Type': 'application/json;utf-8'
        }

      })
      ElMessage({
        type: 'success',
        message: '退号成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退号',
      })
    })

  

}

</script>

<style scoped land="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 24px;
  }

  .input_search {

    width: 400px;
    left: 0%;
  }

  .el-card__header {
    padding: 0;
  }
}

.button_edit {
  /* background: linear-gradient(135deg, rgb(132, 176, 229), rgb(63, 103, 214), rgb(132, 154, 234)); */
  /* background-color: linear-gradient(135deg, rgb(0, 0, 255), rgb(0, 128, 255), rgb(0, 255, 255)); */
  /* background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 105, 143)); */
  color: white;
  background: linear-gradient(135deg, rgb(100, 100, 255), rgb(0, 128, 255), rgb(0, 200, 250));
  transition: background-color 1.5s ease;
}

.button_edit:hover {
  background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
  color: yellow;
}

.button_edit:focus {
  background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
  color: white;
}
.button_drop {
  /* background: linear-gradient(135deg, rgb(132, 176, 229), rgb(63, 103, 214), rgb(132, 154, 234)); */
  /* background-color: linear-gradient(135deg, rgb(0, 0, 255), rgb(0, 128, 255), rgb(0, 255, 255)); */
  /* background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 105, 143)); */
  color: white;
  background: linear-gradient(135deg, rgb(224, 224, 227), rgb(0, 128, 255), rgb(0, 200, 250));
  transition: background-color 1.5s ease;
}

.button_drop:hover {
  background: linear-gradient(135deg, rgb(255, 229, 100), rgb(255, 0, 0), rgb(250, 150, 0));
  color: yellow;
}

.button_drop:focus {
  background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
  color: white;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  margin-top: 12px;
  border-radius: 12px;
}

.cell-item {
  display: flex;
  align-items: center;
}

</style>